<!-- 自定义顶部导航栏 -->
<template>
    <!-- statusBarHeight状态栏高度 -->
    <view :style="{height: statusBarHeight}" class="uni-status-bar"></view>
</template>

<script>
    /* uni.getSystemInfoSync获得系统信息同步接口 属性:statusBarHeight(状态栏的高度)*/
    var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px'
    export default {
        name: 'UniStatusBar',
        data() {
            return {
                statusBarHeight: statusBarHeight
            }
        }
    }
</script>

<style lang="scss" scoped>
    /* 
     注:
     --status-bar-height系统的状态栏高度
     此变量var(--status-bar-height)在微信小程序环境为固定25px,在5+app里为手机实际状态栏高度
     */
    .uni-status-bar{
        height: var(--status-bar-height);
    }
</style>
